<template>
  <div>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px; margin-right: 10px">
      <div style="flex: 2">
        <Badge value="Step 1" severity="info"></Badge>
      </div>
      <div style="flex: 4">
        <Button label="Submit" icon="pi pi-check" @click="visible = true" />
      </div>
    </div>

    <Dialog v-model:visible="visible" modal header="Upload Panel" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
      <FileUpload
          :multiple="true"
          accept="image/*"
          :maxFileSize="3000000"
          :fileLimit="5"
          customUpload
          @uploader="customUpload"
          ref="uploader"
      >
        <template #empty>
          <p>Drag and drop files to here to upload.</p>
        </template>
      </FileUpload>
    </Dialog>
  </div>
</template>

<script>
import Badge from 'primevue/badge'
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import FileUpload from 'primevue/fileupload';
import uploadhelper from "@/components/upload/uploadhelper";
import task from "@/store/modules/task";

export default {
  name: "upload",
  mixins: [uploadhelper],
  components: {
    Button,
    Dialog,
    FileUpload,
    Badge
  },
  data(){
    return {
      visible: false
    }
  },
  methods: {
    customUpload(event){
      const task_id = this.createTaskId()
      if (task_id !== null){
        console.log(task_id)
        this.uploadFileList(this.$refs.uploader, task_id, event.files)
      }
    }
  }
}
</script>

<style scoped>

</style>
